{% extends base_html %}
{% load i18n static %}

{% block title %}{{ view_title }} - PyScada Control Center{% endblock %}

{% block head_css %}
{% for css_file in css_files_list %}
    <link href={{ css_file.src }} rel="stylesheet"/>
{% endfor %}
{% endblock %}

{% block body_confic_data %} data-data-file="json/cache_data/" {% endblock %}

{% block top_menu_left %}
    {% for page in page_list %}
        <li><a href="#{{page.link_title}}" class="hidden-xs">{{page.title}}</a></li>
    {% endfor %}
{% endblock %}

{% block top_menu_left_collapsed %}
    {% for page in page_list %}
        <li><a href="#{{page.link_title}}" class="navbar-toggle visible-xs" data-toggle="collapse" data-target=".navbar-collapse" style="float:left;">{{page.title}}</a></li>
    {% endfor %}
{% endblock %}

{% block top_menu_right %}
    <li><a id='page-load-label'>Loading... </a></li>
    <li><meter id='page-load-state' value="0" min="0" max="100" style="margin-top: 11px;height: 2em;">0</meter></li>
    {% for panel in control_list %}
        {% if panel.visible %}
            <li class="dropdown"><!-- {{ panel.title|upper }} -->
                <a class="dropdown-toggle" href="#" data-toggle="dropdown"><span class="glyphicon glyphicon-wrench"></span> {{ panel.title }}<strong class="caret"></strong></a>
                <div class="dropdown-menu" style="padding: 15px; width:715px;">
                    <div class="control-panel">
                        {% for item in panel.control_panel.items.all %}
                            {% if item.pk in visible_control_element_list %}
                                {% include "control_element.html" with item=item %}
                            {% endif %}
                        {% endfor %}
                        {% for form in panel.control_panel.forms.all %}
                            {% if form.pk in visible_form_list %}
                                {% include "form.html" with form=form %}
                            {% endif %}
                        {% endfor %}
                    </div>
                </div>
            </li>
        {% endif %}
    {% endfor %}
        <li class="dropdown"><!-- Date range picker -->
            <a class="daterangepicker_parent hidden" id="daterange" style="padding-top: 15px; cursor: pointer; width: 100%">
                <i class="glyphicon glyphicon-calendar"></i>&nbsp;
                <span>Date range picker is loading. Please wait...</span> <strong class="caret"></strong>
            </a>
        </li>

        <li class="dropdown"><!-- Charts timeline -->
            <a class="dropdown-toggle timeline hidden" id="timeline_slider" href="#" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><span class="glyphicon glyphicon-resize-horizontal"></span> Timeline slider <strong class="caret"></strong></a>
            <div class="dropdown-menu" style="padding: 15px; width: 50vw;">
                <div class='col-md-12 col-sm-12' data-toggle="tooltip" data-placement="top" title="" data-original-title="Display data filter">
                    <div id="timeline-border" class="form-group" style="height:34px; background-color: #9d9d9d;">
                        <div id="timeline" class="ui-widget-content ui-resizable ui-draggable ui-draggable-handle" style="background-color: #333; width: 100%; height: 34px; left: 0px; top: 0px;">
                            <span class="pull-left glyphicon glyphicon-triangle-left" style="line-height:30px;color:#9d9d9d;" aria-hidden="true"></span>
                            <span class="pull-right glyphicon glyphicon-triangle-right" style="line-height:30px;color:#9d9d9d;" aria-hidden="true"></span>
                            <span id="timeline-time-from-label" class="pull-left" style="padding-left:3px; line-height:34px; color:#9d9d9d"> </span>
                            <span id="timeline-time-to-label" class="pull-right" style="padding-right:3px; line-height:34px; color:#9d9d9d"> </span>
                        </div>
                    </div>
                </div>
            </div>
        </li>
{% endblock %}

{% block content %}
    {{pages_html|safe}}
    <div id="page-log" class="sub-page" style="display: none;">
        <table id="log-table" class="table table-condensed table-hover tablesorter tablesorter-default" width="100%">
            <colgroup>
                <col style="width: 180px;">
                <col style="width: 60px;">
                <col>
            </colgroup>
            <thead>
                <tr>
                    <th>Date</th>
                    <th>Level</th>
                    <th>Message</th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div> <!-- end page-log -->
    {% for panel in panel_list %}
        <div class="side-menu  {% if panel.position == 1 %}left{% elif panel.position == 2 %}right{% endif %}">
            <ul class="status-panel">
                <li>{{ panel.title }}</li>
                {% for item in panel.control_panel.items.all %}
                    {% if item.pk in visible_control_element_list %}
                        {% include "status_element.html" with item=item %}
                    {% endif %}
                {% endfor %}
            </ul>
        </div>
    {% endfor %}
{% endblock %}

{% block include_bottom %}
    {% for js_file in javascript_files_list %}
        <script language="javascript" type="text/javascript" src={{ js_file.src }}></script>
    {% endfor %}
{% endblock %}

{% for file in include %}
    {% include file %}
{% endfor %}
